<!--不同服务定制-->
<template>
  <!-- 基础服务 -->
  <Sections :title="$t('smt.Basicservices')" v-if="basicServerDataArr.length > 0">
    <el-form-item
      id="service"
      v-for="(item, indexs) in prpos.basicServerDataArr"
      :label="item.serviceName"
      :key="item.id"
    >
      <template #label>
        {{ item.serviceName }}
        <Tips :title="item.serviceName" :content="item.crmPcbaServiceCategoryRemarkVOS" />
      </template>
      <recursive-service :tree-data="item.children" :id="item.id" :isTopData="true" />
      <!-- <el-radio-group
        :key="item.id"
        class="offset-margin"
        v-model="allTeydata.allTey[item.serviceKey]"
      >
        <el-radio
          v-for="(pxbItem, index) in item.crmPcbaServiceCategoryDetailVOS"
          :label="pxbItem.serviceDetailName"
          :key="item.id"
          @change="changeRadio(pxbItem, indexs, item)"
          border
        >
          {{ pxbItem.serviceDetailName }}
        </el-radio>
      </el-radio-group> -->
    </el-form-item>
  </Sections>

  <!-- 工艺服务 -->
  <Sections :title="$t('mall.process_service')" v-if="processServerDataArr.length > 0">
    <el-form-item
      v-for="(item, indexs) in prpos.processServerDataArr"
      :label="item.serviceName"
      prop="processServer"
    >
      <template #label>
        {{ item.serviceName }}
        <Tips :title="item.serviceName" :content="item.crmPcbaServiceCategoryRemarkVOS" />
      </template>
      <recursive-service :tree-data="item.children" :id="item.id" :isTopData="true" />
      <!-- <el-radio-group
        :key="item.id"
        class="offset-margin"
        v-model="allTeydata.allTey[item.serviceKey]"
      >
        <el-radio
          v-for="(pxbItem, index) in item.crmPcbaServiceCategoryDetailVOS"
          :label="pxbItem.serviceDetailName"
          :key="item.id"
          @change="changeRadio(pxbItem, indexs, item)"
          border
          >{{ pxbItem.serviceDetailName }}
        </el-radio>
      </el-radio-group> -->
    </el-form-item>
  </Sections>

  <!-- 定制服务 -->
  <Sections :title="$t('smt.Customizedservices')" v-if="customizationServerDataArr.length > 0">
    <el-form-item
      v-for="(item, indexs) in prpos.customizationServerDataArr"
      :label="item.serviceName"
      prop="customizationServer"
    >
      <template #label>
        {{ item.serviceName }}
        <Tips :title="item.serviceName" :content="item.crmPcbaServiceCategoryRemarkVOS"
      /></template>
      <recursive-service :tree-data="item.children" :id="item.id" :isTopData="true" />

      <!-- <el-radio-group
        :key="item.id"
        class="offset-margin"
        v-model="allTeydata.allTey[item.serviceKey]"
      >
        <el-radio
          v-for="(pxbItem, index) in item.crmPcbaServiceCategoryDetailVOS"
          :label="pxbItem.serviceDetailName"
          :key="item.id"
          @change="changeRadio(pxbItem, indexs, item)"
          border
          >{{ pxbItem.serviceDetailName }}</el-radio
        >
      </el-radio-group> -->
    </el-form-item>
  </Sections>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import Sections from '@/components/Sections/index.vue';
import { scrollToSection } from '@/utils/common.js';
import RecursiveService from './recursiveService.vue';
// import { usePcbaServiceCategoryList } from '../../views/pricing/hook/usePcbaServiceCategoryList.js';
const prpos = defineProps({
  // 基础服务
  basicServerDataArr: {
    type: Array,
    default: () => [],
  },
  // 工艺服务
  processServerDataArr: {
    type: Array,
    default: () => [],
  },
  // 定制服务
  customizationServerDataArr: {
    type: Array,
    default: () => [],
  },
  id: {
    type: String,
  },
  type: {
    type: String,
  },
});
const emit = defineEmits(['getServiceData', 'getSelectedItems']);
// const { getPcbaServiceCategoryListData } = usePcbaServiceCategoryList();

let customizedServicesVal = ref([]);
let basicServerDataItem = ref([]); // 基础服务
let customizationServerDataItem = ref([]); // 定制服务
let processServerDataItem = ref([]); // 工艺服务

let SelectedBasic = reactive({}); // 基础服务选中项
let SelectedCustomization = reactive({}); // 工艺服务选中项
let SelectedProcess = reactive({}); //  定制服务选中项
let selectedItems = reactive({}); // 选中项

const allTeydata = reactive({
  allTey: {},
});

/**
 * 获取所有的KEY值
 */
const getAllKey = (data) => {
  const arr = [];
  let obj = {};
  data.forEach((item) => {
    allTeydata.allTey[item.serviceKey] = '';
  });
  console.log('allTey', allTeydata.allTey);
};

/**
 * 不同类型选择服务
 */
const changeRadio = (item, index, data) => {
  const obj = {
    orderValue: '',
    serviceDetailId: item.id,
    serviceDetailKey: item.serviceDetailKey,
    serviceKey: item.serviceKey,
  };
  allTeydata.allTey[data.serviceKey] = item.serviceDetailName;
  console.log('allTeydata', allTeydata.allTey);
  switch (data.categoryType) {
    case 1:
      basicServerDataItem.value[index] = obj;
      break;
    case 2:
      customizationServerDataItem.value[index] = obj;
      break;
    case 3:
      processServerDataItem.value[index] = obj;
      break;
    default:
      break;
  }
  // 选中项接口参数
  customizedServicesVal.value = [
    ...basicServerDataItem.value,
    ...customizationServerDataItem.value,
    ...processServerDataItem.value,
  ];

  // 选中项回显数据
  selectedItems = {
    SelectedBasic: SelectedBasic,
    SelectedCustomization: SelectedCustomization,
    SelectedProcess: SelectedProcess,
  };
  // type = pcb 时不缓存数据
  if (prpos.type != 'pcb') {
    sessionStorage.setItem('selectedItems', JSON.stringify(allTeydata.allTey));
  }

  emit('getServiceData', customizedServicesVal.value);
  emit('getSelectedItems', allTeydata.allTey);
};

const getScrollToSection = () => {
  scrollToSection('#service');
};
defineExpose({
  getScrollToSection,
});

let serverDatalist = ref([]);
onMounted(async () => {
  serverDatalist.value = await getPcbaServiceCategoryListData('3');
  getAllKey(serverDatalist.value.res.data);
  // 选中项回显数据 type = pcb 时不回显
  if (prpos.type != 'pcb') {
    selectedItems = JSON.parse(sessionStorage.getItem('selectedItems'));
    if (selectedItems) {
      allTeydata.allTey = selectedItems;
    }
  }
});
</script>
<style scoped>
.offset-margin {
  margin-bottom: -12px;
}
</style>
